<template>
  <!-- 头部 -->
  <div class="header">
    <div class="left" @click="$router.push('/home')">
      <img src="./images/zhunong_logo.jpg" alt="" />
      <div class="title">助农服务平台</div>
    </div>
    <div class="center"></div>
    <div class="right">
      <div v-if="!userStore.userInfo.userName">
        <el-button @click="login">登录</el-button>
        <el-button @click="register">注册</el-button>
      </div>
      <div v-else style="cursor: pointer;">
        <el-dropdown>
          <div class="header-dropdown">
            <div><img :src="userStore.user.avatar" alt=""/></div>
            <div class="el-dropdown-link">
              <span>{{ userStore.user.realName }}</span>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div @click="goPerson">个人中心</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="$router.push('/order')">我的订单</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="$router.push('/shopCart')">购物车</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="$router.push('/address')">我的地址</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="logout">退出</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Header">
import { onMounted } from "vue";
//引入路由器
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
import useUserStore from "@/stores/modules/user";

let userStore = useUserStore()
let $router = useRouter();

// 登录的回调
const login = () => {
  $router.push('/login')
}
// 注册的回调
const register = () => {
  $router.push('/register')
}
// 退出的回调
const logout = () => {
  //通知pinia仓库清除用户相关的信息
  userStore.logout();
  $router.push({ path: "/home" });
}
// 跳转到个人中心
const goPerson = () => {
  $router.push({ path: "/person" });
}

onMounted(() => {
  userStore.getUserInfo()
})
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  background-color: #ffffff;
  .left {
    width: 350px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    .title {
      flex: 1;
      color: #355476;
      cursor: pointer;
      margin-left: 10px;
      font-size: 24px;
      font-weight: 700;
    }
    img {
      width: 80px;
      height: 60px;
      border-radius: 50%;
    }
  }
  .center {
    flex: 1;
  }
  .right {
    width: 200px;
    padding-right: 20px;
    display: flex;
    justify-content: center;
    .header-dropdown {
      display: flex;
      align-items: center;
      justify-content: right;
      margin-top: 10px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
}
</style>
